<template>
  <el-input placeholder="请输入内容" v-model="value">
    <template #append>
      <el-button @click="viewDialog.visible = true">
        <i :class="value ? value : 'el-icon-picture-outline-round'"></i>
      </el-button>
      <!-- 图标选择dialog -->
      <el-dialog
        :title="viewDialog.title"
        v-model="viewDialog.visible"
        :top="viewDialog.top"
        :width="viewDialog.width"
        :close-on-click-modal="false"
        :append-to-body="true"
      >
        <el-tabs v-model="activeName">
          <el-tab-pane
            :label="i.name"
            :name="'name' + index"
            v-for="(i, index) in iocns"
            :key="i.id"
          >
            <div class="class-box">
              <ul class="icon_lists">
                <li class="dib" v-for="item in i.glyphs" :key="item.icon_id">
                  <i
                    v-if="i.font_family == 'iconfont'"
                    :class="[
                      'icon',
                      i.font_family,
                      i.css_prefix_text + item.font_class,
                    ]"
                    @click="
                      iconClick(
                        'icon ' +
                          i.font_family +
                          ' ' +
                          i.css_prefix_text +
                          item.font_class,
                      )
                    "
                    :title="item.name"
                  ></i>
                  <i
                    v-else-if="i.font_family == 'el-icon'"
                    :class="i.css_prefix_text + item.font_class"
                    @click="iconClick(i.css_prefix_text + item.font_class)"
                    :title="item.name"
                  ></i>
                  <div class="code-name" :title="item.font_class">
                    {{ item.name }}
                  </div>
                </li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </template>
  </el-input>
</template>

<script lang="ts" setup>
import iconList from "@/plugins/iconfont/iconList";
import { reactive, watch, ref, computed } from "vue";

const props = defineProps({
  modelValue: {
    type: String,
  },
});
const emits = defineEmits(["update:modelValue", "change", "input"]);
// reactive 数据双向绑定
const iocns = computed(() => {
  return iconList;
});

const activeName = ref("name0");
const value = ref(props.modelValue);

const viewDialog = reactive({
  top: "15vh",
  width: "60%",
  type: "view",
  title: "选择图标",
  visible: false,
});

watch(
  () => props.modelValue,
  (v1) => {
    value.value = v1;
  },
);

const iconClick = (className: string) => {
  value.value = className;
  // 修改 modelValue 属性
  emits("update:modelValue", className);
  // 文本类需要的事件
  emits("input", className);
  // 选择类需要的事件
  emits("change", className);
  viewDialog.visible = false;
};
</script>

<style lang="less" scoped>
.icon_lists {
  width: 100% !important;
  overflow: hidden;
  *zoom: 1;
}

.icon_lists li {
  display: inline-block;
  width: 80px;
  margin-bottom: 10px;
  margin-right: 20px;
  text-align: center;
  list-style: none !important;
  cursor: default;
  vertical-align: top;
}

.icon_lists i {
  display: block;
  height: 60px;
  line-height: 60px;
  font-size: 32px;
  margin: 5px auto;
  color: #333;
  -webkit-transition:
    font-size 0.25s linear,
    width 0.25s linear;
  -moz-transition:
    font-size 0.25s linear,
    width 0.25s linear;
  transition:
    font-size 0.25s linear,
    width 0.25s linear;
  cursor: pointer;
}

.icon_lists i:hover {
  font-size: 52px;
}

.icon_lists li .name,
.icon_lists li .code-name {
  font-size: 14px;
  color: #666;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.icon_lists li .code-name {
  font-size: 13px;
}
</style>
